<template>
  <view class="inputBox">
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-db">
          <picker
            v-if="cityShow"
            mode="multiSelector"
            :value="multiIndex"
            :range="multiArray"
            range-key="name"
            @columnchange="bindMultiPickerColumnChange"
            @change="cityChange"
          >
            <view class="city">
              <view v-if="provinceName && cityName">
                <image class="city-position-icon" src="../static/icon/position.png"></image>
                <text class="fuhao">{{ provinceName }} {{ cityName }}</text>
              </view>
              <view v-else>
                <image class="city-position-icon" src="../static/icon/position.png"></image>
                <text class="fuhao">请选择城市</text>
              </view>
              <!-- <view class="rightIcon"><img :src="rightIcon" /></view> -->
            </view>
          </picker>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCity } from '@/api/join.js';
export default {
  props: {
    choseCityProps: {
      type: Array,
      default: []
    },
    orderId: String
  },

  data() {
    return {
      cityData: [], // 所有城市列表
      multiArray: [],
      multiIndex: [], // 如果需要返显，需要拿到对应省的下标和对应市的下标
      provinceName: '',
      cityName: '',

      /* ************ */
      cityShow: false,
      cityColumn: '',
      cityValue: '',
      cityAllList: [],
      choseCity: this.choseCityProps,
      address: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const res = await getCity();
      const add = res.data.filter((item, i) => item.city && item.city.length > 0);
      this.cityData = Object.freeze(add);

      // 省份初始化数据省份
      let province = [];
      // 城市初始化数据，二维数组
      let city = [];
      this.cityData.forEach((item) => {
        let provinceObj = { name: item.name, id: item.id };
        province.push(provinceObj);
        if (item.city && item.city.length > 0) {
          let cityScend = [];
          item.city.forEach((cityItem) => {
            let cityScendInit = { name: cityItem.name, id: cityItem.id };
            cityScend.push(cityScendInit);
          });
          city.push(cityScend);
        }
      });

      this.multiArray[0] = Object.freeze(province);
      this.multiArray[1] = Object.freeze(city[0]);
      this.cityAllList = Object.freeze(city);
      this.cityShow = true; // 这为true后选择城市dom再展示，不会出现undefined情况
      // 城市初始化
      if (this.choseCity && this.choseCity.length > 0) {
        // 返显城市省份
        let provinceIndex = this.multiArray[0].findIndex((item) => {
          return item.id === this.choseCity[0];
        });
        let cityIndex = this.multiArray[1].findIndex((item) => {
          return item.id === this.choseCity[1];
        });
        this.multiIndex = [provinceIndex, cityIndex];
        console.log(this.multiIndex);
      }
    },

    bindMultiPickerColumnChange: function (e) {
      this.cityColumn = e.detail.column;
      this.cityValue = e.detail.value;
      const self = this;
      let column = this.cityColumn;
      if (column === 0) {
        let index = this.cityValue;
        self.multiArray[1] = self.cityAllList[index];
        self.multiIndex[1] = 0;
      }
      if (column === 1 && this.multiIndex.length < 1) {
        this.multiIndex[0] = 0;
      }
      this.multiIndex[e.detail.column] = e.detail.value;
    },
    cityChange() {
      const self = this;
      let column = this.cityColumn;
      if (!column && !self.multiIndex[0] && column !== 0) {
        self.multiIndex[0] = 0;
        self.multiIndex[1] = 0;
      }
      this.multiIndex[this.cityColumn] = this.cityValue;

      if (column === 1 && this.multiIndex.length < 1) {
        this.multiIndex[0] = 0;
      }
      this.$forceUpdate();
      let address = [this.multiArray[0][this.multiIndex[0]].id, this.multiArray[1][this.multiIndex[1]].id];
      this.provinceName = this.multiArray[0][this.multiIndex[0]].name;
      this.cityName = this.multiArray[1][this.multiIndex[1]].name;
      this.sendAddress(address);
    },
    sendAddress(val) {
      this.$emit('getPropsAddress', val);
    }
  }
};
</script>

<style lang="scss">
.city {
  color: rgba(0, 0, 0, 0.55);
  font-size: 28rpx;
  position: relative;
}
.fuhao {
  position: relative;
}
.fuhao::after {
  content: ' ';
  position: absolute;
  top: 12rpx;
  right: -24rpx;
  width: 0px;
  height: 0px;
  border-top: 14rpx solid #999999;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
}
.rightIcon {
  position: absolute;
  right: 0rpx;
  top: 2rpx;
}
.rightIcon {
  img {
    width: 48rpx;
    height: 48rpx;
  }
}
.inputBox {
  border-bottom: 1px solid #e8e8e8;
  font-size: 28rpx;
  position: relative;
}
.inputBox:last-child {
  border: none;
}
.clear {
  clear: both;
  overflow: hidden;
  zoom: 1;
  height: 0px;
}
.city-position-icon {
  width: 26rpx;
  height: 28rpx;
  vertical-align: middle;
  margin-right: 6rpx;
}
</style>
